<template>
  <v-container fluid tag="section">
    <v-row>
      <v-col sm="12" md="12">
        <v-card icon="mdi-clipboard-text" class="px-md-5 py-md-3 pa-xs-0 mt-0">
          <v-tabs v-model="tab" background-color="primary" dark>
            <v-tab> 发送普通邮件 </v-tab>
            <v-tab> 发送HTML邮件 </v-tab>
          </v-tabs>
          <v-tabs-items v-model="tab">
            <v-tab-item>
              <v-card flat>
                <v-card-text>
                  <v-card-text>
                    <v-form ref="form1">
                      <v-row>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">收件邮箱</div>
                          <v-text-field
                            v-model="simpleMailItem.toEmail"
                            :rules="[(v) => !!v || '该项为必填项！']"
                            dense
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">邮件标题</div>
                          <v-text-field
                            v-model="simpleMailItem.subject"
                            :rules="[(v) => !!v || '该项为必填项！']"
                            dense
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">邮件内容</div>
                          <v-textarea
                            counter
                            v-model="simpleMailItem.content"
                            dense
                          ></v-textarea>
                        </v-col>
                      </v-row>
                    </v-form>
                  </v-card-text>
                  <v-card-actions>
                    <v-btn text @click="sendSimpleMail()" color="primary">
                      发送
                    </v-btn>
                  </v-card-actions>
                </v-card-text>
              </v-card>
            </v-tab-item>
            <v-tab-item>
              <v-card flat>
                <v-card-text>
                  <v-card-text>
                    <v-form ref="form2">
                      <v-row>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">收件邮箱</div>
                          <v-text-field
                            v-model="htmlEmailItem.toEmail"
                            :rules="[(v) => !!v || '该项为必填项！']"
                            dense
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">邮件标题</div>
                          <v-text-field
                            v-model="htmlEmailItem.subject"
                            :rules="[(v) => !!v || '该项为必填项！']"
                            dense
                          ></v-text-field>
                        </v-col>
                        <v-col cols="12" class="pb-0">
                          <div class="text-h4 font-weight-bold">邮件内容</div>
                          <tinymce-editor
                            ref="editor"
                            v-model="htmlEmailItem.content"
                          />
                        </v-col>
                      </v-row>
                    </v-form>
                  </v-card-text>
                  <v-card-actions>
                    <v-btn text @click="sendHtmlEmail()" color="primary">
                      发送
                    </v-btn>
                  </v-card-actions>
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-card>
      </v-col>
      <v-divider></v-divider>
      <v-col sm="12" md="12">
        <v-btn @click="sendSocketMsg()">发送 Socket 消息</v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { TinymceEditor } from "@/components/other";

export default {
  name: "ExLogIndex",
  components: {
    TinymceEditor,
  },
  data: () => ({
    tab: null,
    simpleMailItem: {
      email: "",
      title: "",
      content: "",
    },
    htmlEmailItem: {
      email: "",
      title: "",
      content: "",
    },
  }),
  methods: {
    /**
     * 发送简单邮件
     */
    sendSimpleMail() {
      var that = this;
      if (that.$refs.form1.validate()) {
        that.request
          .post("/api/email/sendSimpleMail", that.simpleMailItem)
          .then((res) => {
            that.$dialog.notify.success(res.msg, {
              timeout: 2000,
            });
          });
      }
    },

    /**
     * 发送 HTML 邮件
     */
    sendHtmlEmail() {
      var that = this;
      if (that.$refs.form2.validate()) {
        that.request
          .post("/api/email/sendHtmlEmail", that.htmlEmailItem)
          .then((res) => {
            that.$dialog.notify.success(res.msg, {
              timeout: 2000,
            });
          });
      }
    },
    sendSocketMsg() {
      var that = this;
      that.request.get("/api/socket/sendMessage", {
        msg: "你好！！！！！！",
      });
    },
  },
};
</script>
